<template>
    <div class="selectWrap">
        <a-form-item :label="item.label">
            <a-select :allowClear="true" :show-search="item.url ? true : false"
                v-decorator="[item.dataIndex, { rules: [{ required: item.required, message: getMessage(item) }] }]"
                :options="selectFormMater()" :mode="item.mode" :disabled="item.disabled"
                :filterOption="(input, option) => option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) > -1" :placeholder="getMessage(item)"></a-select>
        </a-form-item>
    </div>
</template>
<script>
import { getMessage } from './js/js';

export default {
    name: 'FormSelect',
    props: {
        item: {
            type: Object,
            default: () => { }
        },
        formVal: {
            type: Object,
            default: () => { }
        },
        formData: {
            type: [Array, Object],
            default: () => []
        },
        form: {
            type: [Array, Object, String],
        }
    },
    methods: {
        selectFormMater() {
            let arr = [];
            if (this.item.type == 'select') {
                arr = this.item.sgRolesData || this.item.data;
            } else if (this.item.type == 'selectx') {
                arr = this.item.formRoleData;
            }
            return arr.map(val => {
                return {
                    label: val.roleName || val.name,
                    value: val.roleId || val.parentId || val.id,
                }
            })
        },
        getMessage,
        filterOption(input, option) {
            return option.componentOptions.children[0].text.toLowerCase().indules(input.toLowerCase())
        }
    },
}
</script>
<style lang="less" scoped>
.selectWrap {}
</style>